<template>
	<div
		class="loading"
		v-show="visible"
		:style="{opacity: maskOpacity, backgroundColor: bgColor}"
	>
		<div class="title">{{ text }}</div>
		<div class="bar">
			<div class="bar-inner" :style="{width: progress + 'px'}"></div>
		</div>
		<div class="spinner">
			<div class="bounce1"></div>
			<div class="bounce2"></div>
			<div class="bounce3"></div>
		</div>
		<div class="maker">{{ tips }}</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ComponentInstance } from '@/types/visual-app'
const props = defineProps<ComponentInstance>()


const visible = ref<boolean>(false)
const total = computed(() => typeof props.config?.total === 'number' ? props.config.total : 2)
const auto = computed(() => typeof props.config?.auto === 'boolean' ? props.config.auto : true)
const tips = computed(() => props.config?.tips || '')
const maskOpacity = computed(() => typeof props.config?.maskOpacity === 'number' ? props.config.maskOpacity : 0.8)
const bgColor = computed(() => props.bgColor ?? 'rgba(0,0,0,0.5)')
const localProgress=ref<number>(typeof props.config?.progress === 'number' ? props.config.progress : 0);
const text = ref<string>(props.config?.text || '加载中...')

const emit = defineEmits<{
  (e: 'update:visible', state:boolean): void
}>()

const progress = computed(() => {
	return  (300/total.value) * localProgress.value;
})

const hide=()=>{
	setTimeout(() => {
		visible.value=false
		localProgress.value=0;
		emit('update:visible', false); 
	}, 5000); 
}

const show=()=>{
	visible.value=true
	emit('update:visible', true); 
}

const update=(data:any)=>{
	if(auto.value==true){
		localProgress.value= localProgress.value+1;
	}
	
	if(visible.value==false){
		visible.value=true
		emit('update:visible', true); 
	}
	text.value=data.text;
	if(localProgress.value==total.value){
		hide();
	}
}

defineExpose({
  hide,
  show,
  update
});

watch(() =>props.config?.text, val => {
  text.value = val || ''
})

watch(() =>props.config?.progress, val => {
  localProgress.value = val || 0
})

watch(() =>props.visible, val => {
	visible.value=val|| false
	if(!visible.value) localProgress.value=0
})

// onMounted(() => {
//   if(localProgress.value==0){
//   	show();  
//   }
// })
</script>

<style scoped>
	
	.loading{
		display: flex;
		align-items: center;
		position: fixed;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;
		font-family: PingFang SC,sans-serif;
		box-shadow: 0 0 10px 0 rgba(14,14,14,.3);
		background-image: url(/src/assets/img/loading/Loading_Mask.png);
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0;
		transition: opacity 0.3s;
		flex-direction: column;
		background-position-y: 1px;
		background-repeat: no-repeat;
		-moz-user-select:none; /* Firefox私有属性 */
		-webkit-user-select:none; /* WebKit内核私有属性 */
		-ms-user-select:none; /* IE私有属性(IE10及以后) */
		-khtml-user-select:none; /* Khtml内核私有属性 */
		-o-user-select:none; /* Opera私有属性 */
		user-select:none; /* CSS3属性 */
		>.title{
			color: white;
			flex: 0.488;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-bottom: 10px;
			font-size: 14px;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
		.bar{
			width: 300px;
			height: 4px;
			background: #81818157;
			>.bar-inner{
				height: 4px;
				background-color: white;
				height: 100%;
				width: 0px;
				transition: width 0.3s
			}
		}
		>.maker{
			color: white;
			flex: 0.465;
			display: flex;
			align-items: flex-end;
			align-content: center;
			flex-wrap: nowrap;
			font-family: serif;
			font-size: 13px;
		}
		
		
		.spinner {
		  margin: 5px auto 0;
		  width: 150px;
		  text-align: center;
		}
		 
		.spinner > div {
			width: 10px;
			height: 10px;
			background-color: white;
			border-radius: 3px;
			display: inline-block;
			-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
			animation: bouncedelay 1.4s infinite ease-in-out;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			margin: 2px;
		}
		 
		.spinner .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		 
		.spinner .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
	}
	
	@-webkit-keyframes bouncedelay {
	  0%, 80%, 100% { -webkit-transform: scale(0.0) }
	  40% { -webkit-transform: scale(1.0) }
	}
	 
	@keyframes bouncedelay {
	  0%, 80%, 100% {
	    transform: scale(0.0);
	    -webkit-transform: scale(0.0);
	  } 40% {
	    transform: scale(1.0);
	    -webkit-transform: scale(1.0);
	  }
	}
	
</style>